<template>
  <div class="yi">
    <div class="types">
      <el-segmented v-model="value" :options="options" size="large" />
    </div>
    <div v-if="value == '太极'" style="margin: 40px;">
      <taiji diameter="200" />
    </div>
    <div v-if="value == '两仪'" class="xiang">
      <div v-for="(a, b) in menus[1].children">
        <el-card>
          <template #header>
            <div class="card-header">
              {{ a.name }}
            </div>
          </template>
          <gua diameter="100" :code="a.code" />
        </el-card>
      </div>
    </div>
    <div v-if="value == '四象'" class="xiang">
      <div v-for="(a, b) in menus[2].children">
        <el-card>
          <template #header>
            <div class="card-header">
              {{ a.name }}
            </div>
          </template>
          <gua diameter="100" :code="a.code" />
        </el-card>
      </div>
    </div>
    <div v-if="value == '八卦'" class="xiang">
      <div v-for="(a, b) in menus[3].children">
        <el-card>
          <template #header>
            <div class="card-header">
              {{ a.name }}
            </div>
          </template>
          <gua diameter="100" :code="a.code" />
        </el-card>
      </div>
    </div>
    <div v-if="value == '六十四卦' && isLoad" class="xiang">
      <div v-for="(a, b) in gua64s">
        <el-card style="width: 140px;">
          <template #header>
            <div class="card-header">{{ b + 1 }}</div>
          </template>
          <gua diameter="100" :code="a.code" />
          <template #footer v-if="a.code.length > 3">
            <div class="card-header">
              <span v-if="a.code.length > 3">{{ `${spiltGua(a.code, a.name)}` }}</span>
              <span v-else>{{ a.name }}</span>
            </div>
          </template>
        </el-card>
      </div>
    </div>
    <div v-if="value == '顺序排位' && isLoad" class="xiang2">
      <div v-for="(x, y) in 64">
        <div style="margin: 10px 0;">{{ `${y + 1}${spiltGua(normalGua(x).code, normalGua(x).name)}` }}</div>
        <gua diameter="30" :code="normalGua(x).code" />
      </div>
    </div>
    <div v-if="value == '组合排位' && isLoad" class="xiang3">
      <div v-for="(x, y) in 9">
        <div v-for="(a, b) in 9">
          <div v-if="y == 0 && isLoad">
            <div style="margin: 10px 0;">{{ get8Gua(b).title }}</div>
            <gua diameter="30" :code="get8Gua(b).code" />
          </div>
          <div v-else-if="b == 0 && isLoad">
            <div style="margin: 10px 0;">{{ get8Gua(y).title }}</div>
            <gua diameter="30" :code="get8Gua(y).code" />
          </div>
          <div v-else>
            <div style="margin: 10px 0;">{{ `${spiltGua(getNewGua(y, b).code, getNewGua(y, b).name)}` }}</div>
            <gua diameter="30" :code="getNewGua(y, b).code" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="value == '五行'" class="wuxing">
      <div class="huo">火</div>
      <div class="mu">木</div>
      <div class="tu">土</div>
      <div class="shui">水</div>
      <div class="jin">金</div>
      <!-- <div>木生火</div>
      <div>火生土</div>
      <div>土生金</div>
      <div>金生水</div>
      <div>水生木</div>
      <div>木克土</div>
      <div>土克水</div>
      <div>水克火</div>
      <div>火克金</div>
      <div>金克水</div> -->
    </div>
    <div v-if="value == '易经注解'" class="intro">
      <div class="intro-top">
        <div v-for="(a, b) in gua64s" @click="selectGua(b)">{{ a.name }}</div>
      </div>
      <div class="intro-bottom">
        <div class="intro-detail" v-if="guaDetail != null">
          <div v-for="(x, y) in yaos">
            <div>{{ yaos[5 - y] }}</div>
            <div>
              <gua diameter="100" :code="guaDetail.code[y]" />
            </div>
            <div>{{ getYao(guaDetail.code[y], y) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import taiji from '../components/taiji.vue';
import gua from '../components/gua.vue';
import { queryData } from '@/apis/mysql';
import system from '@/utils/system';
const xiangs = ['太极', '两仪', '四象', '八卦', '六十四卦']
const menus = ref([])
const isLoad = ref(false)
const guaDetail = ref(null)
const guaIdx = ref(0)
const gua8s = ref([])
const gua64s = ref([])
const value = ref('太极')
const yaos = '一二三四五六'
const options = [...xiangs, '顺序排位', '组合排位', '五行', '易经注解', '卦象变化', '天干地址']

onMounted(() => {
  getList()
  // getDir()
})

function getDir() {
  let path = 'D:/cyc/programs/cyc-vue3-electron/cyc-vue3-electron/src/views/collect/modules/yi.txt'
  system.readFile(path).then(res => {
    let arr = []
    res.split('——————').map(x => {
      arr.push(x.split('。'))
    })
    // console.log(arr)
  })
}

function getYao(code, index) {
  let newIdx = 5 - index
  // console.log(code, newIdx)
  let str = ''
  if (newIdx == 0) {
    str = '初' + (code == '9' ? '九' : '六')
  } else if (newIdx == 5) {
    str = '上' + (code == '9' ? '九' : '六')
  } else {
    str = (code == '9' ? '九' : '六') + yaos.split('')[newIdx]
  }
  return str
}

function getList() {
  queryData({
    table: 'guas',
    query: {
      page: 1,
      show: 80
    }
  }).then(res => {
    let arr = []
    xiangs.map((x, y) => {
      arr.push({
        name: x,
        children: res.data.filter(a => a.type == y)
      })
    })
    menus.value = arr
    gua8s.value = arr[3].children
    gua64s.value = arr[4].children
    isLoad.value = true
  })
}

function get8Gua(index) {
  let str = ''
  if (gua8s.value[index - 1]) {
    str = gua8s.value[index - 1]
  }
  return str
}

function getNewGua(y, b) {
  let code = get8Gua(y).code + get8Gua(b).code
  return gua64s.value.filter(x => x.code == code)[0]
}

function normalGua(index) {
  return gua64s.value[index - 1]
}

function getSort(name) {
  return gua64s.value.findIndex(x => x.name == name)
}

function spiltGua(code, name) {
  // // console.log(code, name)
  let str = ''
  // let guas = gua64s.value
  if (code.length > 3) {
    let str1 = gua8s.value.filter(x => x.code == code.slice(0, 3))[0].title
    let str2 = gua8s.value.filter(x => x.code == code.slice(3, 6))[0].title
    if (str1 == str2) {
      str = `${name}为${str1}`
    } else {
      str = str1 + str2 + name
    }
  }
  return str
}

function selectGua(y) {
  guaIdx.value = y
  guaDetail.value = gua64s.value[y]
}
</script>
<style scoped lang="scss">
.yi {
  width: 100%;
  height: 100%;

  .xiang {
    display: flex;
    flex-wrap: wrap;

    >div {
      margin: 5px;
    }

    .card-header {
      text-align: center;
      font-weight: 700;
      font-size: 24px;
    }
  }

  .xiang2 {
    width: 728px;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 90px;
      height: 90px;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      background-color: #fff;
      color: #000;

      >div {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .xiang3 {
    width: 720px;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;

    >div {
      display: flex;
      height: 90px;
      border-left: 2px solid #000;
      border-top: 2px solid #000;

      >div {
        width: 90px;
        height: 90px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        color: #000;
      }

      // >div:first-child {
      //   width: 40px;
      // }
    }

    // >div:first-child {
    //   height: 40px;

    //   >div {
    //     height: 40px;
    //   }
    // }
  }

  .wuxing {
    width: 400px;
    height: 400px;
    border: 2px solid #fff;
    margin: 100px;
    position: relative;
    border-radius: 50%;

    >.huo,
    .mu,
    .tu,
    .shui,
    .jin {
      width: 70px;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: red;
      position: absolute;
      border-radius: 50%;
    }

    .huo {
      left: calc(50% - 20px);
      top: -20px;
      background-color: red;
    }

    .mu {
      left: -20px;
      top: calc(35% - 20px);
      background-color: green;
    }

    .tu {
      right: -30px;
      top: calc(35% - 20px);
      background-color: yellow;
      color: #000;
    }

    .shui {
      left: calc(20% - 30px);
      bottom: -10px;
      background-color: #000;
    }

    .jin {
      right: calc(20% - 30px);
      bottom: -10px;
      background-color: white;
      color: #000;
    }
  }

  .intro {
    .intro-top {
      width: 800px;
      display: flex;
      flex-wrap: wrap;

      >div {
        width: 40px;
        height: 40px;
        margin: 5px;
        border: 1px solid #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }

    .intro-bottom {
      margin-top: 10px;
      display: flex;

      .intro-detail {

        border-top: 1px solid #fff;
        border-left: 1px solid #fff;

        >div {
          display: flex;

          >div {
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #fff;
          }

          >div:first-child {
            padding: 0 20px;
          }

          >div:nth-child(2) {
            width: 150px;

            >Div {
              margin-top: 10px;
            }
          }

          >div:nth-child(3) {
            padding: 0 20px;
          }
        }
      }
    }
  }
}
</style>
